﻿@page "/templates/samples"
@page "/boilerplate/samples"
@inherits AppComponentBase

<PageOutlet Url="templates/samples"
            Title="Samples - Templates"
            Description="samples of the project templates of the bit platform" />

<div class="page-container">
    <BitText Typography="BitTypography.H3" Gutter>Boilerplate Samples</BitText>

    <BitText Typography="BitTypography.Subtitle1">
        We published a few apps using our own bit Boilerplate project template in different platforms.
        <br />
        Two distinct samples that further explain the features in action are included in the project template:
    </BitText>

    <br />
    <br />
    <br />

    <BitText Typography="BitTypography.H4" Gutter>AdminPanel sample</BitText>
    <div class="page-flex-container">
        <div class="page-content-container">
            <div class="image-container">
                <img class="template-img" src="/images/templates/adminpanel.webp" alt="AdminPanel sample" />
                <a class="demo-btn-shadow" href="@Urls.AdminPanelPwa" target="_blank">
                    <div class="demo-btn">Demo</div>
                </a>
            </div>
            <BitText Typography="BitTypography.Body1">
                The AdminPanel sample is a project powered by bit Boilerplate that includes all the necessary parts to create a fully-featured cross-platform admin/management website/app.
            </BitText>
        </div>

        <div class="page-content-container">
            <a class="primary-btn" href="@Urls.AdminPanelPwa" target="_blank" title="SPA">SPA demo</a>
            <a class="secondary-btn" href="@Urls.AdminPanelGooglePlay" target="_blank" title="Google Play"><span class="btn-img google-play"></span>Android</a>
            <a class="secondary-btn" href="@Urls.AdminPanelAppleStore" target="_blank" title="Apple Store"><span class="btn-img apple-store"></span>iOS - macOS</a>
            <a class="secondary-btn" href="@Urls.AdminPanelWindows" target="_blank" title="Windows"><span class="btn-img windows"></span>Windows</a>
        </div>
    </div>

    <br />
    <br />
    <br />

    <BitText Typography="BitTypography.H4" Gutter>Todo sample</BitText>
    <div class="page-flex-container">
        <div class="page-content-container">
            <div class="image-container">
                <img class="template-img" src="/images/templates/todotemplate.webp" alt="Todo sample" />
                <a class="demo-btn-shadow" href="@Urls.TodoTemplatePwa" target="_blank">
                    <div class="demo-btn">Demo</div>
                </a>
            </div>
            <BitText Typography="BitTypography.Body1">
                The Todo sample is a project powered by Boilerplate that includes work packages and actions that you can apply to various cross-platform projects.
            </BitText>
        </div>

        <div class="page-content-container">
            <a class="primary-btn" href="@Urls.TodoTemplatePwa" target="_blank" title="Prerendered PWA demo">Prerendered PWA</a>
            <a class="secondary-btn" href="@Urls.TodoTemplateGooglePlay" target="_blank" title="Google Play"><i class="btn-img google-play" />Android</a>
            <a class="secondary-btn" href="@Urls.TodoTemplateAppleStore" target="_blank" title="Apple Store"><span class="btn-img apple-store"></span>iOS - macOS</a>
            <a class="secondary-btn" href="@Urls.TodoTemplateWindows" target="_blank" title="Windows"><span class="btn-img windows"></span>Windows</a>
        </div>
    </div>
</div>

<br /><br />

<NavigationButtons Prev="Overview" PrevUrl="/templates/overview" Next="Getting started" NextUrl="/templates/getting-started" />
